<script type="text/javascript">
$(document).ready(function() {

	Gmaps.map.createMarker({Lat: Gmaps.map.userLocation.lat(),
                        Lng: Gmaps.map.userLocation.lng(), 
                        rich_marker: null, 
                        marker_picture: "/assets/marker.png"
                       })	
					   
					   
	Gmaps.map.callback = function() {
		console.log(Gmaps.map.markers)
	}
	
	
});

//http://andyglassblog.wordpress.com/2012/07/06/google-maps-for-rails-with-gmaps4-rails-tutorial-on-how-to-post-and-filter-locations/

/*
var PopulationFilter = {
  min: 800000,
  max: 10000000,
};

$("#population-range").slider({
  range: true,
  min: PopulationFilter.min,
  max: PopulationFilter.max,
  values: [ PopulationFilter.min, PopulationFilter.max ],
  slide: function(event, ui) {
    $( "#filtered-pop" ).val( (ui.values[ 0 ])+ " - " + (ui.values[ 1 ]))
  }
});

$( "#filtered-pop" ).val( (PopulationFilter.min)+ " - " + (PopulationFilter.max))
*/
</script>





<h1>Listing cities</h1>

<table>
  <tr>
    <th>Name</th>
					<th>String</th>
    <th>State</th>
    <th>Latitude</th>
    <th>Longitude</th>
    <th>Gmaps</th>
    <th>Population</th>
    <th></th>
    <th></th>
    <th></th>
  </tr>
				<div id='population-range' style="width: 500px"></div>
				<input type="text" id="filtered-pop" style="width: 200px"/>			 
  
											   <%=  gmaps4rails(@json) %>    
	
		 
			
			<!-- <%= %> -->

<% @cities.each do |city| %>
  <tr>
    <td><%= city.name %></td>
					<td><%= city.string %></td>
    <td><%= city.state %></td>
    <td><%= city.latitude %></td>
    <td><%= city.longitude %></td>
    <td><%= city.gmaps %></td>
    <td><%= city.population %></td>
    <td><%= link_to 'Show', city %></td>
    <td><%= link_to 'Edit', edit_city_path(city) %></td>
    <td><%= link_to 'Destroy', city, method: :delete, data: { confirm: 'Are you sure?' } %></td>
  </tr>
<% end %>
</table>

<br />

<%= link_to 'New City', new_city_path %>
